<template>
  <div class="three-slide">
    <cube-slide  :data="dailyList" ref="dailySlide"  :interval="3500">
      <cube-slide-item  v-for="(itemList,index) in dailyList" :key="index"  >
        <div class="slide_item">
          <div class="item"  v-for="item in itemList" :key="item.id" @click="turn('/detail?id='+item.id)">
            <img :src="imgH+item.img" alt="" class="img">
            <div class="info" :class="{'dir':type}">
              <span class="name">{{item.name}}</span>
              <div class="price">
                ¥{{item.nowPrice?item.nowPrice:'00'}}
                <span class="old-price" v-if="type">
                  ¥{{item.oldPrice?item.oldPrice:'00'}}
                </span>
              </div>
            </div>
          </div>
        </div>
          <!--          <img :src="imgH+item.img" alt="">-->
<!--          <div class="goods_detail">-->
<!--            <p class="goods_name">{{item.name}}</p>-->
<!--            <p class="goods_desc">{{item.info}}</p>-->
<!--            <div class="goods_shop">-->
<!--              <div class="goods_price">-->
<!--                <p class="old">¥{{item.oldPrice?item.oldPrice:'00'}}</p>-->
<!--                <p class="new">¥{{item.nowPrice?item.nowPrice:'00'}}</p>-->
<!--              </div>-->
<!--              <div class="buy">购买</div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
      </cube-slide-item>
    </cube-slide>
  </div>
</template>

<script>
export default {
  data(){
    return {
      imgH: process.env.VUE_APP_IMG_DOMAIN,
    }
  },
  created() {
  },
  computed:{
    dailyList(){
      let tem = []
      let res = []
      for (let i = 0; i < this.list.length; i++) {
        tem.push(this.list[i])
        if(tem.length==3){
          res.push(tem.concat())
          tem = []
        }else if (i == this.list.length-1) { //最后了
          res.push(tem)
        }
      }
      return  res
    }
  },
  methods:{
    turn(url){
      this.$router.push(url)
    }
  },
  props:{
    list:Array,
    type:Number
  }
}
</script>

<style scoped lang="stylus">
.three-slide
  background white
  width 100%
  .slide_item
    display flex
    width 300px
    padding-bottom 20px
    .item
      margin-right 6px
      &:last-chlid
        margin-right 0
      .img
        width 100px
        height  100px
      .info
        display flex
        align-items center
        justify-content space-between
        .name
          width 65px
          overflow hidden
          color #333333
          font-size 10px
          white-space nowrap
          text-overflow ellipsis
        .price
          height 12px
          width 28px
          border-radius 5px 0 5px 0
          background-color #00D6C0
          color #FFFFFF
          font-size 10px
          display flex
          align-items center
          justify-content center
        &.dir
          flex-direction column
          justify-content flex-start
          .name
            width 100px
            color #333333
            font-size 12px
            margin-bottom 6px
          .price
            font-size 14px
            color: #00D6C0;
            background none
            display flex
            width 90%
            justify-content flex-start
            align-items flex-end
            line-height 14px
            .old-price
              line-height 12px
              margin-left 6px
              font-size 10px
              color #C8C8C8
              text-decoration line-through
</style>